﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!-- TABLE STYLES-->
    <link href="assets/js/dataTables/dataTables.bootstrap.css" rel="stylesheet" />
</head>
<body>
<!-- /. 查询表单  -->
<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default"><!--面板-->
            <div class="panel-heading"><!--面板头部-->
                Search Condition
            </div>
            <div class="panel-body"><!--面板内容-->
                <div>
                    <form id="searchForm" onsubmit="return false">
                        <div>
                            <div class="form-group col-lg-6">
                                <label>菜单名称：</label>
                                <input class="form-control" name="menuName" data-condition="like" style="width:200px;display: inline">
                            </div>
                            <div class="form-group  col-lg-6 text-right">
                                <button id="search" class="btn btn-info"><i class="fa fa-search"></i> Search</button>
                                <button type="reset" class="btn btn-default"><i class="fa fa-refresh"></i> Reset</button>
                            </div>
                        </div>
                    </form>
                </div>
                <!-- /.row (nested) -->
            </div>
            <!-- /.panel-body -->
        </div>
        <!-- /.panel -->
    </div>
    <!-- /.col-lg-12 -->
</div>
<!-- /. 表格  -->
<div class="row">
    <div class="col-md-12">
        <!-- Advanced Tables -->
        <div class="panel panel-default">
            <div class="panel-heading">
                Advanced Tables
            </div>
            <div class="panel-body">
                <div class="table-responsive" id="table-content">

                </div>

            </div>
        </div>
        <!--End Advanced Tables -->
    </div>
</div>
<!-- /. PAGE WRAPPER  -->
<!--新增对话框-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style='width: 800px;'>
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">新增菜单</h4>
            </div>
            <div class="modal-body">
                <div class="panel panel-default"><!--面板-->
                    <div class="panel-heading"><!--面板头部-->
                        菜单数据
                    </div>
                    <div class="panel-body"><!--面板内容-->
                        <div>
                            <form id="addForm" onsubmit="return false">
                                <div class="row">
                                    <div class="form-group col-lg-6">
                                        <label>	菜单名称：</label>
                                        <input class="form-control" name="menuName" style="width:200px;display: inline">
                                    </div>
                                    <div class="form-group col-lg-6">
                                        <label>菜单地址：</label>
                                        <input class="form-control" name="menuAction" style="width:200px;display: inline">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-lg-6">
                                        <label>	菜单图标：</label>
                                        <input class="form-control" name="menuIcon" style="width:200px;display: inline">
                                    </div>
                                    <div class="form-group col-lg-6">
                                        <label>菜单排序：</label>
                                        <input class="form-control" name="menuPin" style="width:200px;display: inline">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-lg-6">
                                        <label>	父级菜单：</label>
                                        <!--<input class="form-control" name="parentMenu" style="width:200px;display: inline">-->
                                        <select class="form-control"  style="width:200px;display: inline" name="parentMenu">
                                            <option value="0">--</option>
                                        </select>
                                    </div>
                                    <div class="form-group col-lg-6">
                                        <label>备注说明：</label>
                                        <textarea class="form-control" rows="3" name="menuRemark"></textarea>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- /.row (nested) -->
                    </div>
                    <!-- /.panel-body -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="submitForm()">提交</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /. WRAPPER  -->
<!-- JS Scripts-->
<!-- jQuery Js -->
<script src="assets/js/jquery-1.10.2.js"></script>
<!-- Bootstrap Js -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Metis Menu Js -->
<script src="assets/js/jquery.metisMenu.js"></script>
<!-- DATA TABLE SCRIPTS -->
<script src="assets/js/dataTables/jquery.dataTables.js"></script>
<script src="assets/js/dataTables/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="js/RootDialog.js"></script>

<script src="js/CustomForm.js"></script>
<script>
    var talbeEntity = "menu";
    var baseUrl = window.location.origin;

    $(document).ready(function () {
        //绑定查询事件
        $("#search").click(function () {
            var where = $("#searchForm");
            //查询数据
            CustomForm.search(talbeEntity,where,function(result){
                // 生成表格
                if(result.result=="success"){
                    var data = result.data;
                    var dataArray = [];
                    for(var i = 0;i<data.length;i++){
                        var rowData = [];
                        var rowObj = data[i];
                        var optionHtml = "<button class='btn btn-sm btn-success' onclick='editData("+rowObj.id+")'>編輯</button>" +
                            "<button class='btn btn-sm btn-danger' onclick='deleteData("+rowObj.id+")'>删除</button>";
                        rowData.push(i+1);
                        rowData.push(rowObj.menuName);
                        rowData.push(rowObj.menuAction);
                        rowData.push("<i class='"+rowObj.menuIcon+"'></i>&nbsp;&nbsp;&nbsp;&nbsp;"+rowObj.menuIcon);
                        rowData.push(rowObj.menuRemark);
                        rowData.push(optionHtml);
                        dataArray.push(rowData);
                    }

                    $('#table-content').html("");
                    $('#table-content').html('<table class="table table-striped table-bordered table-hover" id="dataTables-customForm"></table>' );
                    $('#dataTables-customForm').dataTable({
                        "aLengthMenu":[10,20,40,60],
                        "searching":false,//禁用搜索
                        "lengthChange":true,
                        "paging": true,//开启表格分页
                        "bProcessing" : true,
                        "bServerSide" : false,
                        "bAutoWidth" : false,
                        "sort" : "position",
                        "deferRender":true,//延迟渲染
                        "bStateSave" : false, //在第三页刷新页面，会自动到第一页
                        "iDisplayLength" : 10,
                        "iDisplayStart" : 0,
                        "dom": '<l<\'#topPlugin\'>f>rt<ip><"clear">',
                        "data":dataArray,
                        "columns":[
                            { "title": "序号" },
                            { "title": "菜单名称" },
                            { "title": "访问路径" },
                            { "title": "菜单图标"},
                            { "title": "备注"},
                            { "title": "操作"}
                        ],
                        "oLanguage" : { // 国际化配置
                            "sProcessing" : "正在获取数据，请稍后...",
                            "sLengthMenu" : "显示 _MENU_ 条",
                            "sZeroRecords" : "没有找到数据",
                            "sInfo" : "从 _START_ 到  _END_ 条记录 总记录数为 _TOTAL_ 条",
                            "sInfoEmpty" : "记录数为0",
                            "sInfoFiltered" : "(全部记录数 _MAX_ 条)",
                            "sInfoPostFix" : "",
                            "sSearch" : "搜索",
                            "sUrl" : "",
                            "oPaginate" : {
                                "sFirst" : "第一页",
                                "sPrevious" : "上一页",
                                "sNext" : "下一页",
                                "sLast" : "最后一页"
                            }
                        },
                        initComplete:initComplete
                    });
                }
            });
        });

        $("#search").click();
    });

    /**
     * 表格加载渲染完毕后执行的方法
     * @param data
     */
    function initComplete(data){
        var topPlugin='&nbsp;&nbsp;<button id="add" class="btn btn-primary btn-sm addBtn" onclick="addData()">新 增</button>';

        $("#topPlugin").append(topPlugin);//在表格上方topPlugin DIV中追加HTML
        $("#topPlugin").css("text-align","right");
    }

    /**
     * 添加事件
     */
    function addData(){
        $("#myModal").modal('show');
    }

    /**
     * 删除事件
     */
    function deleteData(id){
        var where = [{
            "nameShort":"id",
            "value":id
        }];
        _confirm("系统提示","是否删除该数据",{
            callback:function (v) {
                if(v){
                    jQuery.ajax({
                        url:baseUrl+"/custom/data/delete/"+talbeEntity,
                        type:"post",
                        dataType:"json",
                        data:JSON.stringify(where),
                        contentType:"application/json",
                        success:function(result){
                            if(result.result=="success"){
                                $("#search").click();
                            }else{
                                _alert("系统提示",result.message);
                            }
                        },
                        error:function (z,x,c) {
                            console.log(z);
                        }
                    });
                }
            }
        });
    }

    /**
     * 提交数据到后台
     */
    function submitForm() {
        var data = {};
        var dd = $("#addForm input:enabled,#addForm select:enabled,#addForm textarea:enabled");
        for(var i = 0;i<dd.length;i++){
            data[$(dd[i]).attr("name")]=$(dd[i]).val();
        }
        debugger
        jQuery.ajax({
            url:baseUrl+"/custom/data/insert/"+talbeEntity,
            type:"post",
            dataType:"json",
            contentType:"application/json",
            data:JSON.stringify(data),
            success:function(result){
                if(result.result=="success"){
                    $("#myModal").modal('hide');
                    $("#search").click();
                }else{
                    _alert("系统提示",result.message);
                }
            },
            error:function (z,x,c) {
                console.log(z);
            }
        });
    }
</script>
</body>
</html>